<template>
     <transition name='slide'>
        <div id="editPassword">
             <navbar :title="title"></navbar>
             <div class="placeholder"></div>
             <div class="form">
                <div class="form-item">
                    <span class="label">
                        原密码
                    </span>
                    <input type="password" name="oldPwd" placeholder="请输入原密码" v-model="oldPwd" autocomplete="off">
                </div>
                <div class="form-item">
                    <span class="label">
                        新密码
                    </span>
                    <input type='password'  name="password" placeholder="请输入新密码" v-model="newPwd" autocomplete="off">
                </div>
                <div class="form-item">
                    <span class="label">
                        确认密码
                    </span>
                    <input type='password'  name="confirmPwd" placeholder="请再次输入新密码" v-model="confirmPwd" autocomplete="off">
                </div>
                 <p style="width: 6.64rem;margin:0.1rem auto;padding:0 0.15rem;font-size:0.28rem;color:#c7c6cc">提示：密码由6-16位字母或数字组成</p>
                <div class="button">
                    <button @click="submit">提交</button>
                </div>
            </div>
        </div>
     </transition>
</template>

<script>
    import navbar from 'common/navbar'
    import { Toast } from 'vant'
    import {mapMutations} from 'vuex'
    import {editPassword} from 'api/login'
    export default {
        data(){
            return{
                title:'修改密码',
                oldPwd:'',
                newPwd:'',
                confirmPwd:'',
            }
        },
        methods:{
            submit(){
                if(this.oldPwd.length==0){
                    Toast("请输入原密码");
                    return
                }else if(this.newPwd.length==0){
                    Toast("请输入新密码");
                    return
                }else if(this.confirmPwd.length==0){
                    Toast("请再次输出新密码");
                    return
                }else if(this.newPwd!==this.confirmPwd){
                    Toast("两次密码输入不一致");
                    return
                }else{
                    editPassword(this.oldPwd,this.newPwd).then(res=>{
                         if(res.data.error==0){
                             Toast("修改密码成功,请重新登录");
                             this.SET_LOGININFO("");
                             this.SET_USERINFO("");
                             setTimeout(()=>{
                                this.$router.push({
                                    path: '/login',
                                    query: {redirect:'/user'}
                                });
                             },300)
                         }
                    })
                }
            },
             ...mapMutations(['SET_LOGININFO','SET_USERINFO'])
        },
        components:{
            navbar
        }
    }
</script>

<style scoped lang="scss">
@import '~styles/variable.scss';
@import '~styles/mixins.scss';
.slide-enter-active, .slide-leave-active{
    transition: all 0.3s;
}
.slide-enter, .slide-leave-to{
    transform: translate3d(100%, 0, 0);
}
.placeholder{
    width:100%;
    height:0.8rem;
}
#editPassword{
    position: fixed;
    z-index: 1001;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: #fff;
}
.form{
    margin-top:0.72rem;
    .form-item{
        position:relative;
        margin: 0.3rem auto 0;
        padding:0 0.2rem 0 1.7rem;
        width: 6.64rem;
        height: 0.9rem;
        line-height: 0.9rem;
        border: 1px solid #cbcbcb;
        border-radius: 10px; 
        &:last-child{
            margin:0 auto;
        }
        input{
            width:100%;
            height:100%;
            line-height:100%;
            padding-left:0.12rem;
            border:none;
            box-sizing: border-box;
            font-size:0.28rem;
            background: transparent;
        }
        .label{
            position:absolute;
            top:50%;
            transform: translateY(-50%);
            left:0.3rem;
            font-size:$font-size-m;
            color:$color-text;
        }
    }
        .button{
            width:6.6rem;
            margin:0.8rem auto 0 auto;
        button{
            @include login-btn();
        }
    }
}
</style>